<template>
  <div class="formContainer">
    <div id="formContent"></div>
  </div>
</template>

<script>
import DragController from "@/lib";
export default {
  name: "Form",
  data() {
    return {};
  },
  mounted() {
    const widgets = this.getFormWidgets() || null;
    const dragController = new DragController(widgets);
    dragController.selectedWidgets.setWidgets(
      dragController.initSelectedWidgetsByWidgets(widgets)
    );
    dragController._mountForm("formContent", false);
    // this.$store.commit("saveDragController", dragController);
  },
  methods: {
    getFormWidgets() {
      console.log(this.$route);
      const { id } = this.$route.query;
      if (id === undefined) return null;
      // TODO 从表单列表的编辑过来，需要先获取编辑项所包含的组件属性
      return [
        {
          type: "input",
          widgetProps: {
            label: "姓名",
            labelWidth: 80,
            field: "name",
            placeholder: "请输入姓名",
            colspan: 6,
            prefix: "",
            suffix: "",
            prefixIcon: "",
            suffixIcon: "",
            maxLength: 120,
            minLength: 0,
            clearable: true,
            readonly: false,
            disabled: false,
            required: false,
            rules: [],
          },
        },
        {
          type: "select",
          widgetProps: {
            label: "类型",
            labelWidth: 80,
            field: "type",
            colspan: 6,
            placeholder: "请选择类型",
            options: [
              {
                label: "四川",
                value: "SC",
                confirmed: true,
              },
              {
                label: "贵州",
                value: "GZ",
                confirmed: true,
              },
              {
                label: "云南",
                value: "YN",
                confirmed: true,
              },
            ],
            required: true,
          },
        },
        {
          type: "button",
          widgetProps: {
            text: "确定",
            type: "primary",
            size: "small",
            colspan: 3,
            plain: false,
            round: false,
          },
        },
      ];
    },
  },
};
</script>


<style lang="scss" scoped>
.formContainer {
  padding: 24px;
}
</style>